今天來簡單介紹一下，如何將 h1 (主標題)內的文字置換成精美的 LOGO 圖片！

當然精美的 LOGO 請自己做自己想辦法，這邊只有教學怎麼置換而已 (喂

昨天講了些 body 內常見的 HTML 標籤
其中也特別講到的 h1 (主標題)，占搜尋引擎搜索優化部分非常重！
假使我希望使用者一搜尋 it邦幫忙 就能找到網站，但我也希望 h1 是一張美美的 LOGO，那我是不是勢必得寫成下面的格式呢？

<h1>it邦幫忙</h1>
<style>
    h1{
      background-image: url(https://ithelp.ithome.com.tw/storage/image/logo.svg);
      width: 150px; 
      height: 42.677px;
    }
</style>

但這樣一來，我們就會得到以下的畫面

為了更方便瀏覽，所以我在 body,html 中下了 background-color: #e0e0e0;

但是我們並不希望 h1 當中為了讓搜尋引擎找到的文字出現，這時候應該怎麼辦呢？
我們可以這樣寫

<h1>it邦幫忙</h1>
<style>
h1{
    background-image: url(https://ithelp.ithome.com.tw/storage/image/logo.svg);
    width: 150px; 
    height: 42.677px;
    text-indent: 101%;
    white-space: nowrap;
    overflow: hidden;
  }
</style>

• text-indent: 101%
  強迫文字縮排至原本的區域外
• white-space: nowrap
  規定段落中的文字不得進行換行，常用於避免字數過多時自動換行導致閱讀效果變差
• overflow: hidden
  將超出範圍的內容隱藏

這樣一來我們就可以得到美美的 LOGO 圖，又沒有奇怪的文字檔住它囉！

本日實做的範例在此，也歡迎大家自己動手玩玩看

>>隊友任意門<<

• Jason 勇者Jason和前端之鑰
• Clover 用Vue與firebase開發訂便當系統實錄
• aflect 我的UI/UX奮鬥屎
• GG 一隻巨大的UI/UX菜鳥
• Jimmy ES666
• R-yin 菜鳥前端奮鬥史(欸?

我是小菜鳥阿陰，我們下次見！